<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contact</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">

</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 最上方导航栏 -->
        <div class="nav">
            <div class="logo">
                <a class="ETH" href="../index.html">
                    <p class="ETH">ETH-Hardware</p>
                </a>
                <!-- <p class="ETH">ETH-Hardware</p> -->
            </div>
            <div class="menu_nav">
                <ul>
                    <li>
                        <a href="blog.html">BLOG</a>
                    </li>
                    <li>
                        <a href="contact.html" style="background-color: #169bd5;">CONTACT</a>
                    </li>
                    <li>
                        <a href="product.html">PRODUCT</a>
                    </li>
                    <li>
                        <a href="about.html">ABOUT</a>
                    </li>
                    <li>
                        <a href="../index.html">HOME</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 展示区域 -->
        <div align="center" class="show">
            <!-- 展示 -->
            <img class="eth1" src="../images/ETH-2.0-Beacon-Chain-Launch.jpg" alt="eth2" >
        </div>
    </div>

    <div class="main">
        <hr>
        <div class="google_map">
            <!-- 在google地图里找到公司位置，然后嵌入其中即可，width为1920，height为600 -->
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14767.326925683054!2d114.14506314825437!3d22.284363060973995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m3!3e6!4m0!4m0!5e0!3m2!1szh-CN!2shk!4v1641884121228!5m2!1szh-CN!2shk"
                allowfullscreen="" loading="lazy">
            </iframe>
        </div>
        <div class="touch">
            <p class="head_contact">
                Get in Touch
            </p>
            <div class="user_massage">
                <li>
                    <!-- <textarea class="message"></textarea> -->
                    <input class="message" placeholder="Enter Message">
                </li>
                <li>
                    <input class="name" placeholder="Enter your name">
                    <input class="email" placeholder="Enter your Email">
                </li>
                <li>
                    <input class="subject" placeholder="Enter Subject">
                </li>
                <li>
                    <button class="send">SEND</button>
                </li>
            </div>
            <div class="contact">
                <ul>
                    <li>
                        <div><img src="../images/address.png" alt="address"></div>
                        <div>
                            <p class="contact_head">Buttonwood,California</p>
                            <p class="contact_body">Rosemead,CA 91770</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="../images/tel.png" alt="tel"></div>
                        <div>
                            <p class="contact_head">+1 253 565 2365</p>
                            <p class="contact_body"> Mon to Fri 9am to 6pm</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="../images/email.png" alt="email"></div>
                        <div>
                            <p class="contact_head">support@colorlib.com</p>
                            <p class="contact_body">Send us your query anytime</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <div class="bottomnav">
            <ul>
                <li class="last">
                    <a href="blog.html">BLOG</a>
                </li>
                <li>
                    <a href="contact.html" style="color: #169bd5;">CONTACT</a>
                </li>
                <li>
                    <a href="product.html">PRODUCT</a>
                </li>
                <li>
                    <a href="about.html">ABOUT</a>
                </li>
                <li>
                    <a href="../index.html">HOME</a>
                </li>
            </ul>
        </div>
        <div class="button">
            <button>BUTTON</button>
        </div>
        <div class="link">
            <ul>
                <li><a href="https://www.linkedin.com" target="blank" title="linkedin">
                        <img src="../images/linkedin.png" alt="linkedin" width="36px">
                    </a>
                </li>
                <li>
                    <a href="https://www.facebook.com" target="blank" title="facebook">
                        <img src="../images/facebook.png" alt="facebook" width="36px">
                    </a>
                </li>
                <li>
                    <a href="https://www.youtube.com" target="blank" title="youtube">
                        <img src="../images/youtube.png" alt="youtube" width="36px">
                    </a>
                </li>
            </ul>
        </div>
        <div class="copyright">
            <p class="copyright">
                Copyright @2021 All rights reserved | This template is made by Mr White
            </p>
        </div>
</body>

</html>